<template>
	<view class="">
   <view class="user_info">
   	<view class="user_item">
   		<image :src="imgDetail.user.avatar" mode="aspectFill"></image>
		<view class="user_desripton">
			<view class="user_name">
				{{imgDetail.user.name}}
			</view>
			<view class="user_time">
				{{imgDetail.cnTime}}
			</view>
		</view>
   	</view>
   </view>
   <view class="pic">
	   <go-slide @goSlide="handleSlide">
   	<image :src="imgDetail.thumb" mode="aspectFill"></image>
	</go-slide>
   </view>
   <view class="user_rank">
   	<view class="rank">
   		<image src="/static/zan.png" mode=""></image> {{imgDetail.rank}}
   	</view>
	<view class="user_collect">
		<image src="../../static/xin.png" mode=""></image> 收藏
	</view>
   </view>
   <view class="album_wrap" v-if="album.length">
   	<view class="album_title">
   		相关
   	</view>
	<view class="album_list">
		<view class="album_item" v-for="item in album" :key="item.id">
			<view class="album_cover">
				<image :src="item.cover" mode="aspectFill"></image>
			</view>
			<view class="album_info">
				<view class="album_info_text">
					专辑
				</view>
				<view class="album_name">
					{{item.name}}
				</view>
				<view class="album_icon">
					>
				</view>
			</view>
		</view>
	</view>
   </view>
   
   <view class="hot_tab" v-if="comment.length">
   	<view class="hot_title">
   		<image src="../../static/huo.png" mode=""></image> <text>最新评论</text>
   	</view>
	<view class="hot_list" v-for="item in comment" :key="item.id">
		<view class="user_item">
			<image :src="item.user.avatar" mode="aspectFill"></image>
			<view class="user_desripton">
				<view class="user_name">
					{{item.user.name}}
				</view>
				<view class="user_time">
					{{item.cntime}}
				</view>
			</view>
		</view>
		<view class="pl">
			<text>{{item.content}}</text>
			<view class="pl_pic">
					<image src="../../static/zan.png" mode=""></image>{{item.size}}
			</view>
		
		</view>
	</view>
   </view>
   <!-- 下载 -->
   <view class="download">
   	<view class="download_btn" @click="handleDownload">
   		下载图片
   	</view>
   </view>
	</view>
</template>

<script>
	import goSlide from "@/components/goSlide.vue"
	import moment from "moment"
	moment.locale("zh-cn")
	export default{
		components:{
			goSlide
		},
		data(){
			return{
				imgDetail:{},
				album:[],
				hot:[],
				comment:[],
				imgIndex:0
			}
		},
		onLoad() {
			console.log(getApp().globalData)
			
			const{imgIndex}=getApp().globalData
			this.imgIndex=imgIndex
			this.getData()
		},
		methods:{
			getData(){
					const{imgList}=getApp().globalData
				this.imgDetail=imgList[this.imgIndex]
				console.log(this.imgDetail)
				// this.imgDetail.newThumb=this.imgDetail.thumb+this.imgDetail.rule.replace('$<Height>',360)
				this.imgDetail.cnTime=moment(this.imgDetail.atime*1000).fromNow()
				this.geiCommit(this.imgDetail.id)
			},
		geiCommit(id){
				this.request({
					url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
				}).then(res=>{
					console.log(res)
					this.album=res.data.res.album
					this.hot=res.data.res.hot
					this.comment=res.data.res.comment
					res.data.res.comment.forEach(v=>v.cntime=moment(v.atime*1000).fromNow())
					
				})
			},
			// 滑动
			handleSlide(e){
				// console.log(e)
				const{imgList}=getApp().globalData
				if(e.direction==="left"&&this.imgIndex<imgList.length-1){
					this.imgIndex++
					this.getData()
				}else if(e.direction==="right"&&this.imgIndex>0){
					this.imgIndex--
					this.getData()
				}else{
					uni.showToast({
						title:"没有数据了",
						icon:"none"
					})
				}
				
			},
		  async	handleDownload(){
			const res1=await uni.downloadFile({
					url:this.imgDetail.img
				})
				const {tempFilePath}=res1[1]
				console.log(tempFilePath)
				const res2=await uni.saveImageToPhotosAlbum({
					filePath:tempFilePath
				})
				console.log(res1)
				console.log(res2)
				console.log("下载成功")
			}
		}
	}
</script>

<style scoped>
	.user_info{
	
	}
	.user_item{
		 display: flex;
		 flex-wrap: nowrap;
		 padding: 20rpx;
		
	}
	.user_item image{
		width: 80rpx;
		height: 80rpx;
		display: block;
		border-radius: 50%;
		}
	.user_name{
		color: #000000;
		font-weight: 600;
		
	}
	.user_time{
		color: #CCCCCC;
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	.pic image{
		width: 100%;
		height: 400rpx;
		
	}
	.user_desripton{
		
		margin-left: 3%;
	}
.user_rank{
	display: flex;
 height: 80rpx;
	
}
.rank{
	flex: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 70rpx;
 
}
.rank image{
	width: 30rpx;
	height: 30rpx;
}
.user_collect{
	flex: 1;
	justify-content: center;
	align-items: center;
	line-height: 70rpx;
	text-align: center;
}
.user_collect image{
	 width: 30rpx;
	 height: 30rpx;
}
.album_wrap{
	padding: 20rpx;
}
.album_title{
	padding: 10rpx 0;
}
.album_list .album_item{
	display: flex;
	padding: 10rpx 0;
	border-bottom:8rpx solid #CCCCCC;
}
.album_cover{
	flex: 1;
}
.album_cover image{
	width: 180rpx;
	height: 180rpx;
}
.album_info{
	flex: 3;
	padding-left: 20rpx;
	position: relative;
}
.album_info_text{
	width: 100rpx;
	height: 50rpx;
	background-color: #d52a7e;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
}
.album_name{
	padding: 10rpx 0;
	
}
.album_icon{
	font-size: 40rpx;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10%;
}
.hot_tab .hot_title{
	 
	padding: 15rpx;
	font-size: 36rpx;
	font-weight: 600;
}
.hot_title image{
	width: 60rpx;
	height: 60rpx;
	margin: 0 15rpx;
}
.pl .pl_pic image{
	width: 40rpx;
	height: 40rpx;
}
.pl text{
	font-size: 24rpx;
	font-weight: 600;
	margin-left: 15%;
}
.pl{
	position: relative;
}
.pl_pic{
	position: absolute;
	right: 5%;
	bottom: 0;
}
.hot_list{
	border-bottom: 5rpx solid #CCCCCC;
}
.download{
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.download_btn{
	width: 90%;
	height: 80%;
	background-color: #F0AD4E;
	color: #FFFFFF;
	font-size: 50rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
	</style>
